import React, { Component } from 'react'
import { connect } from 'react-redux'
import action from './store/actionCreator.js' 
import axios from 'axios'
class Home extends Component {
  componentDidMount () {
    this.props.getBannerList()
    this.props.getProList({ limitNum: 5 })
  }
  render() {
    const { bannerList, proList } = this.props
    return (
      <div>
        <ul>
          {
            bannerList && bannerList.map((item, index) => (
              <li key = { index }>
                <img style={{ width: 100 }} src={ item.img } alt={ item.alt }/>
              </li>
            ))
          }
        </ul>
        <ul>
          {
            proList && proList.map((item, index) => (
              <li key = { index }>
                { item.proname }
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}


// export default connect(({ bannerList, proList }) => ({ bannerList, proList }),
// (dispatch) => ({ 
//   // dispatch 可以用来触发 actionCreator
//   getBannerList () {
//     // 本质上 调用 actionCreator 不需要加 ()
//     // 但是如果在调用 actionCreator 时 你传递了参数，就需要加()
//     dispatch(action.getBannerListAction)
//   },
//   getProList (params) {
//     dispatch(action.getProListAction(params))
//   }
// }))(Home)

export default connect(({ bannerList, proList }) => ({ bannerList, proList }),
(dispatch) => ({ 
  // dispatch 可以用来触发 actionCreator
  getBannerList () {
    // 本质上 调用 actionCreator 不需要加 ()
    // 但是如果在调用 actionCreator 时 你传递了参数，就需要加()
    dispatch(action.getBannerListAction) // dispatch 触发actionCreator
  },
  getProList (params) {
    axios.get('http://121.89.205.189/api/pro/list', { params })
      .then(res => {
        dispatch({ // dispatch 触发reducer 改变状态
          type: 'UPDATE_PRO_LIST',
          payload: res.data.data
        })
      })
  }
}))(Home)